<template>
    <view>
        <cu-custom :bgLiner="true">
        	<block slot="content">个人资料</block>
        </cu-custom>
        <view class="container">        	
            <view class="card">
                <view class="item flex justify-space-between align-center">
                    <view class="name">头像</view>
                    <view class="con flex align-center" @click="upImg">
                        <view class="con_"><image style="width: 67rpx; height: 67rpx;  min-width: 67rpx;border-radius: 50%;" :src="postData.photo?postData.photo:'/static/img/headimg.png'"></image></view>
                        <image src="/static/img/right-gray.png" style="width: 11rpx;height: 19rpx"></image>
                    </view>
                </view>
                <view class="item flex justify-space-between align-center" @click="addHandle">
                    <view class="name">昵称</view>
                    <view class="con flex align-center">
                        <view class="con_">{{info.name}}</view>
                        <image src="/static/img/right-gray.png" style="width: 11rpx;height: 19rpx"></image>
                    </view>
                </view>
				<picker mode="selector" :range="sexArr" @change="sexChange">
					<view class="item flex justify-space-between align-center">
					    <view class="name">性别</view>
					    <view class="con flex align-center">
					        <view class="con_">{{sexArr[postData.sex]}}</view>
					        <image src="/static/img/right-gray.png" style="width: 11rpx;height: 19rpx"></image>
					    </view>
					</view>
				</picker>
				
                <view class="item flex justify-space-between align-center">
                    <view class="name">手机号码</view>
                    <view class="con flex align-center">
                        <view class="con_">{{info.username?$util.tel(info.username):'' }}</view>
                        <image src="/static/img/right-gray.png" style="width: 11rpx;height: 19rpx"></image>
                    </view>
                </view>
            </view>
        </view>
		
		<uni-popup ref="popup" type="center" :animation="false">
			<view class="popup_content">
				<view class="popup_content_title">修改昵称</view>
				<view class="content_item flex align-center ">
					<view class="name">昵称</view>
					<view class="con_ width100">
						<input v-model="postData.name" placeholder="请输入昵称"
							placeholder-style="color:#DEDEDE;font-size:28rpx" />
					</view>
				</view>
				<div class="footer flex justify-center">
					<view @click="addClose" class="btn">取消</view>
					<view class="btn sure" @click="addSub">确认</view>
				</div>
			</view>
		</uni-popup>
    </view>
	
</template>

<script>
	export default {
		data() {
			return {
				postData:{
					name:'',
					photo:'',
					sex:0
				},
				info:{},
				sexArr:['未知','男','女'],
			}
		},
		onLoad() {
			this.getInfo();
		},
		methods: {
			sexChange(e){
				console.log(e)
				let val = e.detail.value;
				this.postData.sex = val;
				this.setInfo();
			},
			addHandle() {
				this.$refs.popup.open()
			},
			addClose() {
				this.$refs.popup.close()
			},
			addSub(){
				this.setInfo();
				this.$refs.popup.close()
			},
			getInfo(){
				let data = {
				
				}
				this.$http('/api/userInfo', data,'get').then(res => {
					let info = res.data;
					this.info = info;
					this.postData.photo = info.photo?info.photo:'';
					this.postData.name = info.name?info.name:'';
					this.postData.sex = info.sex?info.sex:0;
				})
			},
			setInfo(){
				let data = this.postData;
				this.$http('/api/saveUserInfo', data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						setTimeout(() => {
							this.getInfo();
						}, 800)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			upImg(){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log(res)
						let file = res.tempFiles[0];
						this.$util.uploadService(file,(e)=>{
							console.log(e)
							this.postData.photo = e;
							this.setInfo();
							
						})
					}
				})
				// uni.chooseFile({
				//   count: 1,
				//   type: 'image',
				//   success :(res)=> {
				//     // tempFilePath可以作为img标签的src属性显示图片
				//     console.log(res)
				// 	let file = res.tempFiles[0];
				// 	this.$util.uploadService(file, (e) => {
				// 		this.postData.photo = e;
				// 		this.setInfo();
				// 	})
				//   }
				// })
			},
		}
	}
</script>

<style lang="less">
	.container{
        padding:0  32rpx 32rpx;
        box-sizing: border-box;
        .card{
            .item{
                margin: 24rpx 0;
                .con_{
                    margin-right: 20rpx;
					color: #999999;
                }
            }
        }
    }
	.popup_content {
		width: 95%;
		min-width: 660rpx;
		min-height: 450rpx;
		background-color: #fff;
		border-radius: 20rpx;
		font-size: 28rpx;
		position: relative;
	
		.close_icon {
			position: absolute;
			bottom: -110rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	
		.footer {
			padding-top: 50rpx;
			padding-bottom: 60rpx;
	
			.btn {
				width: 170rpx;
				height: 71rpx;
				text-align: center;
				line-height: 70rpx;
				color: #666;
				background-color: #DEDEDE;
				border: 1px solid #DEDEDE;
				margin-right: 50rpx;
				margin-left: 50rpx;
				border-radius: 20rpx;
				font-size: 30rpx;
			}
	
			.sure {
				color: #fff;
				background-color: #4072F4;
				border-color: #4072F4;
			}
		}
	
		.uni-select {
			border: none !important;
		}
	
		&_title {
			line-height: 3;
			font-size: 32rpx;
			text-align: center;
			padding-top: 20rpx;
		}
	
		.content_item {
			padding: 20rpx 50rpx 20rpx 30rpx;
			margin: 0 30rpx;
			box-sizing: border-box;
	
			.name {
				min-width: 130rpx;
				padding-bottom: 20rpx;
			}
	
			.con_ {
				padding-bottom: 20rpx;
				border-bottom: 1px solid #DEDEDE;
			}
		}
	}
</style>
